<template>
  <view>
    <!-- 如果工资列表为空，显示暂无工资信息 -->
    <view v-if="salaryList.length === 0" class="no-salary">暂无年收入信息</view>
    <!-- 否则显示工资信息列表 -->
    <view v-else>
      <view
        v-for="salary in salaryList"
        :key="salary.paymentMonth"
        class="salary-item"
      >
        <!-- 显示年份和月份 -->
        <view class="date-info">
          <text class="year">{{ salary.year }}</text>
        </view>
        <!-- 显示工资信息 -->
        <view class="salary-info">
          <text>应发合计（元）: {{ formatNumber(salary.yf) }}</text>
          <text>实发合计（元）: {{ formatNumber(salary.sf) }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { stuffList } from "@/api/work/salaryData";
export default {
  data() {
    return {
      salaryList: [],
      queryParams: {
        pageNum: 1,
        pageSize: 1000,
      },
    };
  },
  methods: {
    fetchSalaryData() {
      stuffList("")
        .then((response) => {
          this.salaryList =
            response.data ||
            [
              // {
              //   year: "2023",
              //   yf: "121121.123",
              //   sf: "113122.1234533",
              // },
            ];
          console.log(response.rows);
        })
        .catch((error) => {
          console.error("Error fetching salary data:", error);
        });
    },
	formatNumber(number) {
		if (number){
			let str = number.toFixed(2).toString();
			let parts = str.split('.'); 
			let integerPart = parts[0];
			let decimalPart = parts[1]; // 插入千位分隔符 
			return "￥" + integerPart.replace(/(\d)(?=(?:\d{3})+$)/g, '$1,') + "." + decimalPart
		}else{
			return "￥0.00"
		}
	},
  },
  mounted() {
    this.fetchSalaryData();
  },
};
</script>

<style>
/* 无工资信息时的样式 */
.no-salary {
  text-align: center;
  margin-top: 20px;
  color: #999;
}

/* 工资项容器样式 */
.salary-item {
  display: flex;
  background-color: white;
  flex-direction: row;
  justify-content: space-between;
  padding: 10px 30px;
  border-bottom: 1px solid #eee;
}

/* 日期信息容器样式 */
.date-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  margin-right: 15px;
}

/* 工资信息容器样式 */
.salary-info {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
}

/* 年份和月份的样式 */
.year {
  font-weight: bold;
  font-size: 15px;
  margin-bottom: 5px;
}

.month {
  font-weight: bold;
  font-size: 30px;
  margin-bottom: 5px;
}

/* 工资项的文本样式 */
.salary-info text {
  margin-bottom: 5px;
  color: #333;
}
</style>
